<template>
	<view class="ss-cube-wrap" :style="[parseAdWrap]">
		<!-- 一行两个 -->
		<view class="buju buju0" v-show="data.rubiksCubeType === 0">
			<view
				class="rubiksCubeType0 rubiksCubeType"
				v-for="index in 2"
				:key="index"
				@tap="$router.go(data.list[index - 1].url)"
			>
				<image :src="$url.cdn(data.list[index - 1].src)" mode="widthFix"></image>
			</view>
		</view>

		<!-- 一行三个 -->
		<view class="buju buju0" v-if="data.rubiksCubeType === 1">
			<view
				class="rubiksCubeType1 rubiksCubeType"
				v-for="index in 3"
				:key="index"
				@tap="$router.go(data.list[index - 1].url)"
			>
				<image :src="$url.cdn(data.list[index - 1].src)" mode="widthFix"></image>
			</view>
		</view>

		<!-- 一行四个 -->
		<view class="buju buju0" v-if="data.rubiksCubeType === 2">
			<view
				class="rubiksCubeType2 rubiksCubeType"
				v-for="index in 4"
				:key="index"
				@tap="$router.go(data.list[index - 1].url)"
			>
				<image :src="$url.cdn(data.list[index - 1].src)" mode="widthFix"></image>
			</view>
		</view>

		<!-- 两左两右 -->
		<view class="buju buju0" v-if="data.rubiksCubeType === 3">
			<view
				class="rubiksCubeType3 rubiksCubeType"
				v-for="index in 4"
				:key="index"
				@tap="$router.go(data.list[index - 1].url)"
			>
				<image :src="$url.cdn(data.list[index - 1].src)" mode="widthFix" />
			</view>
		</view>

		<!-- 一左二右 -->
		<view class="buju buju4" v-if="data.rubiksCubeType === 4">
			<view class="rubiksCubeType hw" @tap="$router.go(data.list[0].url)">
				<image :src="$url.cdn(data.list[0].src)" style="height: 300px; width: 100%" mode="aspectFill" />
			</view>
			<view style="display: inline-flex; flex-direction: column; width: 50%">
				<view
					class="hw imgone"
					v-for="index in 2"
					:key="index"
					@tap="$router.go(data.list[index].url)"
				>
					<image :src="$url.cdn(data.list[index].src)" style="height: 150px" mode="aspectFill"/>
				</view>
			</view>
		</view>

		<!-- 一上两下 -->
		<view class="buju buju5" v-if="data.rubiksCubeType === 5">
			<view
				class="rubiksCubeType hw"
				style="display: block"
				@tap="$router.go(data.list[0].url)"
			>
				<image :src="$url.cdn(data.list[0].src)" alt="" style="width: 100%" mode="aspectFill"/>
			</view>
			<view style="display: flex; justify-content: center">
				<view v-for="index in 2" :key="index" @tap="$router.go(data.list[index].url)">
					<image :src="$url.cdn(data.list[index].src)" alt="" mode="aspectFill" />
				</view>
			</view>
		</view>

		<!-- 一左三右 -->
		<view class="buju buju4" v-if="data.rubiksCubeType === 6">
			<!-- 第一张图片 fff-->
			<view class="rubiksCubeType" @tap="$router.go(data.list[0].url)" style="height: 300px" >
				<image :src="$url.cdn(data.list[0].src)" style="width: 375rpx" mode="aspectFit"/>
			</view>
			<view>
				<!-- 第二张图片 -->
				<view
					class="rubiksCubeType hw"
					@tap="$router.go(data.list[1].url)"
					style="height: 150px"
				>
					<image :src="$url.cdn(data.list[1].src)" style="width: 375rpx; height: 150px" mode="aspectFill"/>
				</view>
				<view style="height: 150px; display: flex">
					<view
						class="hw"
						style="display: flex; justify-content: center; align-items: center"
						v-for="index in 2"
						:key="index"
						@tap="$router.go(data.list[index + 1].src)"
					>
						<image
							:src="$url.cdn(data.list[index + 1].src)"
							style="height: 75px; width: 187.5rpx" mode="aspectFill"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	/**
	 * 广告魔方
	 *
	 * @property {Array<Object>} list 			- 魔方列表
	 * @property {Object} styles 				- 组件样式
	 * @property {String} background 			- 组件背景色
	 * @property {Number} topSpace 				- 组件顶部间距
	 * @property {Number} bottomSpace 			- 组件底部间距
	 * @property {Number} leftSpace 			- 容器左间距
	 * @property {Number} rightSpace 			- 容器右间距
	 * @property {Number} imgSpace 				- 图片间距
	 * @property {Number} imgTopRadius 			- 图片上圆角
	 * @property {Number} imgBottomRadius 		- 图片下圆角
	 *
	 */

	import { computed, inject, unref } from 'vue';
	import $router from '/shop/router/index.js';
	import $url from '/shop/url/index.js';
	import $platform from '/shop/platform/index.js';

	// 参数
	const props = defineProps({
		data: {
			type: Object,
			default() {},
		},
		styles: {
			type: Object,
			default() {},
		},
	});

	// 单元格大小
	const windowWidth = $platform.device.windowWidth;
	const cell = computed(() => {
		return (
			(windowWidth -
				(props.styles.marginLeft + props.styles.marginRight + props.styles.padding * 2)) /
			4
		);
	});

	//包裹容器高度
	const parseAdWrap = computed(() => {
		// let heightArr = props.data.list.reduce(
		// 	(prev, cur) =>
		// 		prev.includes(cur.height + cur.top) ? prev : [...prev, cur.height + cur.top],
		// 	[],
		// );
		// let heightMax = Math.max(...heightArr);
		// return {
		// 	height: heightMax * cell.value + 'px',
		// 	width:
		// 		windowWidth -
		// 		(props.data?.style?.marginLeft +
		// 			props.data?.style?.marginRight +
		// 			props.styles.padding * 2) *
		// 			2 +
		// 		'px',
		// };
	});

	// 解析图片大小位置
	const parseImgStyle = (item) => {
		let obj = {
			width: item.width * cell.value - props.data.space + 'px',
			height: item.height * cell.value - props.data.space + 'px',
			left: item.left * cell.value + 'px',
			top: item.top * cell.value + 'px',
			'border-top-left-radius': props.data.borderRadiusTop + 'px',
			'border-top-right-radius': props.data.borderRadiusTop + 'px',
			'border-bottom-left-radius': props.data.borderRadiusBottom + 'px',
			'border-bottom-right-radius': props.data.borderRadiusBottom + 'px',
		};
		return obj;
	};
</script>

<style lang="scss" scoped>
	.ss-cube-wrap {
		position: relative;
		z-index: 2;
		width: 750rpx;
	}

	.cube-img-wrap {
		position: absolute;
		z-index: 3;
		overflow: hidden;
	}

	.cube-img {
		width: 100%;
		height: 100%;
	}

	.imgone {
		&:last-of-type {
			img {
				padding-bottom: 0 !important;
				padding-right: 0 !important;
			}
		}
		&:first-of-type {
			img {
				padding-top: 0 !important;
				padding-right: 0 !important;
			}
		}
	}
	.imgtow {
		&:first-of-type {
			img {
				padding-bottom: 0 !important;
				padding-left: 0 !important;
			}
		}
		&:last-of-type {
			img {
				padding-bottom: 0 !important;
				padding-right: 0 !important;
			}
		}
	}
	.hw {
		width: 100%;
		position: relative;
		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.buju {
		&.buju0 {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
		}
		&.buju4 {
			display: flex;
			width: 100%;
			height: 300px;
			flex-direction: row;
			justify-content: space-around;
		}
		.active {
			background: #e0edff;
			border: 1px solid #155bd4;
			color: #155bd4;
			z-index: 2;
		}
		.rubiksCubeType {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			&.rubiksCubeType0 {
				width: 50%;
				// height: 200px;
				&:first-of-type {
					img {
						padding-left: 0 !important;
						padding-top: 0 !important;
						padding-bottom: 0 !important;
					}
				}
				&:last-of-type {
					img {
						padding-right: 0 !important;
						padding-top: 0 !important;
						padding-bottom: 0 !important;
					}
				}
				img {
					width: 100%;
					display: block;
				}
			}
			&.rubiksCubeType1 {
				width: 33.333%;
				&:nth-of-type(1) {
					margin-left: 0 !important;
					margin-top: 0 !important;
					margin-bottom: 0 !important;
				}
				&:nth-of-type(2) {
					margin-top: 0 !important;
					margin-left: 0 !important;
					margin-bottom: 0 !important;
				}
				&:nth-of-type(3) {
					margin-top: 0 !important;
					margin-right: 0 !important;
					margin-bottom: 0 !important;
				}
				img {
					width: 100%;
					height: 150px;
					display: block;
				}
			}
			&.rubiksCubeType2 {
				width: 25%;
				&:nth-of-type(1) {
					margin-left: 0 !important;
					margin-top: 0 !important;
					margin-bottom: 0 !important;
				}
				&:nth-of-type(2) {
					margin-top: 0 !important;
					margin-left: 0 !important;
					margin-bottom: 0 !important;
				}
				&:nth-of-type(3) {
					margin-top: 0 !important;
					margin-left: 0 !important;
					margin-bottom: 0 !important;
				}
				&:nth-of-type(4) {
					margin-top: 0 !important;
					margin-right: 0 !important;
					margin-bottom: 0 !important;
				}
				img {
					width: 100%;
					height: 150px;
					display: block;
				}
			}
			&.rubiksCubeType3 {
				width: 50%;
				position: relative;
				&:nth-of-type(1) {
					img {
						padding-top: 0 !important;
						padding-left: 0 !important;
					}
				}
				&:nth-of-type(2) {
					img {
						padding-top: 0 !important;
						padding-right: 0 !important;
					}
				}
				&:nth-of-type(3) {
					img {
						padding-bottom: 0 !important;
						padding-left: 0 !important;
					}
				}
				&:nth-of-type(4) {
					img {
						padding-bottom: 0 !important;
						padding-right: 0 !important;
					}
				}
				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			&.rubiksCubeType4 {
				width: 187px;
				height: 187px;
				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>
